<template>
	<view>
		<z-paging ref="paging" v-model="dataList"  @query="queryList" use-page-scroll>
			<view slot="top">
				<cu-custom :isBack="true" :bgColor="'bg-black'" :backColor="'text-white'">
					<block slot="backText">
						<view class="text-white ">{{ backname }}</view>
					</block>
				</cu-custom>
				<view class="bg-white padding">
					<scroll-view scroll-x class="nav">
						<view
							class="cu-item flex-sub"
							:class="index == TabCur ? 'text-black,cur' : ''"
							v-for="(item, index) in id == '' ? ['主持人信息'] : ['主持人信息', '会开剧本']"
							:key="index"
							@click="tabSelect"
							:data-id="index"
						>
							{{ item }}
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-show="TabCur == 0">
				<van-cell-group>
					<van-field
						type="textarea"
						size="large"
						autosize
						:value="name"
						@input="name = $event.detail"
						label="姓名"
						placeholder="请填写主持人姓名"
						required
						maxlength="20"
					/>
					<van-cell title="性别" required title-width="180rpx">
						<template slot="">
							<van-radio-group :value="sex" @change="sex = $event.detail">
								<view class="flex">
									<van-radio :name="0" checked-color="#dcc512" class="margin-right-xs">男</van-radio>
									<van-radio :name="1" checked-color="#dcc512">女</van-radio>
								</view>
							</van-radio-group>
						</template>
					</van-cell>
					<van-field :value="constellation" @input="constellation = $event.detail" size="large" label="星座" placeholder="请填写主持人星座" required :border="false" />
					<van-field
						:value="OpeningTimes"
						@input="OpeningTimes = $event.detail"
						size="large"
						label="开本次数"
						placeholder="请填写主持人开本次数"
						required
						:border="false"
					/>
					<van-field
						:value="briefIntroduction"
						@input="briefIntroduction = $event.detail"
						size="large"
						label="简介"
						placeholder="请填写主持人简介"
						autosize
						type="textarea"
						maxlength="300"
						required
						:border="false"
					/>
					<view class="cu-bar bg-white margin-top">
						<view class="action">
							<text class="text-red">*</text>
							主持人封面
						</view>
						<view class="action"><!-- {{imgList.length}}/1 --></view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" @click="ViewImage" :data-url="$isHttp(cover)" v-if="cover != ''">
								<image :src="$isHttp(cover)" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="3"><text class="cuIcon-close"></text></view>
							</view>
							<view class="solids" @click="ChooseImage(3)" v-if="cover == ''"><text class="cuIcon-cameraadd"></text></view>
						</view>
					</view>
					<view class="cu-bar bg-white margin-top">
						<view class="action">
							<text class="text-red">*</text>
							主持人轮播
						</view>
						<view class="action">{{ carousel.length }}/8</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" @click="ViewImage" v-for="(item, index) in carousel" :key="index" :data-url="$isHttp(item)">
								<image :src="$isHttp(item)" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @click.stop="Delcarousel(index)"><text class="cuIcon-close"></text></view>
							</view>
							<view class="solids" @click="ChooseImage(4)" v-if="carousel.length < 8"><text class="cuIcon-cameraadd"></text></view>
						</view>
					</view>
				</van-cell-group>

				<view class="padding-xl"><button @click="submit" class="cu-btn block bg-black margin-tb-sm lg" :loading="false">提交</button></view>
			</view>

			<view v-show="TabCur == 1">
				<view class="padding-lr-xl">
					<button @click="$goPage('../ScriptManagement/ScriptManagement1?type=addHostPlay&id=' + id)" class="cu-btn block bg-black margin-tb-sm lg" :loading="false">
						添加
					</button>
				</view>
				<view class="padding-lr-sm padding-tb-sm margin-xs">
					<view class="text-df text-black text-bold margin-bottom-sm">
						<text class="cuIcon-titles text-black"></text>TA会开的剧本
					</view>
					<view class="margin-xs" style="color: #a7a7a7;">
						<view class="cu-card article">
							<view 
								class=" shadow padding-sm radius margin-tb-sm"
								style="background-color: #fff;position: relative;" v-for="(item,index) in dataList"
								:key="index">
								<!-- <image src="../../static/icon/zd.png" class="zd" mode=""></image> -->
								<view class="flex justify-start">
									<image
										:src="$isHttp(item.playPicture)"
										style="width: 160rpx;height: 220rpx;border-radius: 10rpx;" mode="aspectFill">
									</image>
									<view class=" margin-left-sm" style="width: 520rpx;">
										<view class="flex justify-start margin-top-xs">
											<view class="text-bold" style="color: #000000;">{{item.playName}}</view>
											<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
										</view>
										<view class="margin-top-sm">
											<van-rate :value="Number(item.playAverageScore)/2" :size="18" allow-half color="#fbbd08"
												void-color="#adb0b3" void-icon="star" readonly />
										</view>
										<view class="">
											<view v-for="(item1,index1) in item.playSmallClass" :key="index1"
												class="cu-tag line-black radius  margin-top-sm"
												style="background-color: #fff;color: #b2b1b6;">{{item1.small_name}}</view>
										</view>
										<view class="flex justify-between  margin-top-sm">
											<view class="flex align-end text-yellow">
												<!-- <view class="text-sm ">¥</view>
											<view class="text-lg text-bold">139</view>
											<view class="text-sm ">/位</view> -->
											</view>
											<view @click.stop="deletePresentPlay(item.playId,index)"
											class="cu-btn bg-red sm round text-white">删除</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import { baseUrl } from '../../initial.js';
import { validate, string, util, isValid } from 'valid.js';
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	data() {
		return {
			backname: '新增主持人',
			id: '',
			TabCur: 0,

			show: false,

			// areaList: area,

			name: '',
			sex: 0,
			constellation: '', //星座
			OpeningTimes: '', //开本次数
			briefIntroduction: '', //简介
			cover: '', //封面
			carousel: [],
			
			dataList:[],
		};
	},
	watch: {
		TabCur: function(newVal, oldVal) {
			if (newVal === 1) {
				this.$refs.paging.reload();
			}
		}
	},
	onLoad(option) {
		if (option.id != undefined) {
			this.backname = '编辑主持人';
			this.id = option.id;
			this.$u.adminApi
				.getPresent({
					presentId: option.id
				})
				.then(res => {
					this.name = res.data.present.name;
					this.sex = res.data.present.sex;
					this.constellation = res.data.present.constellation;
					this.OpeningTimes = res.data.present.presentCount;
					this.briefIntroduction = res.data.present.introduction;
					this.cover = res.data.present.picture;
					for (var i = 0; i < res.data.presentCarousels.length; i++) {
						this.carousel.push(res.data.presentCarousels[i].pictureImg);
					}
				});
		}
	},
	methods: {
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			if (this.TabCur === 1) {
				this.$u.adminApi
					.getPresentPlay({
						page: pageNo,
						number: pageSize,
						presentId: this.id
					})
					.then(res => {
						this.$refs.paging.complete(res.data);
					});
			}else{
				this.$refs.paging.complete()
			}
		},
		deletePresentPlay(id,index){
			this.$u.adminApi
				.deletePresentPlay({
					presentId: this.id,
					playId:id
				})
				.then(res => {
					if(res.code===200){
						this.dataList.splice(index,1)
					}
				});
		},
		submit() {
			if (!isValid(this.name, [string.length(1, 20), util.isRequired])) {
				this.$textToast('主持人姓名不符合要求');
				return;
			}
			// if (!this.checkTel(this.phone)) {
			// 	this.$textToast('电话号码不合法')
			// 	return
			// }
			if (!isValid(this.constellation, [util.isRequired])) {
				this.$textToast('请填写主持人星座');
				return;
			}
			if (!isValid(this.OpeningTimes, [util.isRequired])) {
				this.$textToast('请填写主持人开本次数');
				return;
			}
			if (!isValid(this.briefIntroduction, [string.length(1, 300), util.isRequired])) {
				this.$textToast('请填写主持人简介');
				return;
			}
			if (!isValid(this.cover, [util.isRequired])) {
				this.$textToast('请上传主持人封面');
				return;
			}
			if (this.carousel.length === 0) {
				this.$textToast('请上传主持人轮播图');
				return;
			}
			let dataobj = {
				id: this.id,
				name: this.name,
				sex: this.sex,
				picture: this.cover,
				constellation: this.constellation,
				introduction: this.briefIntroduction,
				presentCount: this.OpeningTimes,
				store: this.vuex_bussinessId,
				array: this.carousel
			};
			if (this.id === '') {
				this.$u.adminApi.addPresent(dataobj).then(res => {
					if (res.code == 200) {
						this.$successToast(res.message);
						uni.navigateBack();
					}
				});
			} else {
				this.$u.adminApi.editPresent(dataobj).then(res => {
					if (res.code == 200) {
						this.$successToast(res.message);
						uni.navigateBack();
					}
				});
			}
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		},
		ChooseImage(index) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: res => {
					uni.uploadFile({
						url: baseUrl + '/store/upload', //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
							Authorization: 'Bearer ' + this.vuex_token
						},
						formData: {
							select: index
						},
						success: uploadFileRes => {
							switch (index) {
								case 0:
									this.logo = JSON.parse(uploadFileRes.data).data;
									break;
								case 1:
									this.yyzz = JSON.parse(uploadFileRes.data).data;
									break;
								case 2:
									// 代码块
									break;
								case 3:
									this.cover = JSON.parse(uploadFileRes.data).data;
									break;
								case 4:
									this.carousel.push(JSON.parse(uploadFileRes.data).data);
									break;
								case 5:
									this.bgm = JSON.parse(uploadFileRes.data).data;
									break;
								default:
								// 默认代码块
							}
						}
					});
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '贴贴',
				content: '确定要删除吗？',
				cancelText: '再看看',
				confirmText: '再见',
				success: res => {
					if (res.confirm) {
						switch (e.currentTarget.dataset.index) {
							case 0:
								this.logo = '';
								break;
							case 1:
								this.yyzz = '';
								break;
							case 2:
								// 代码块
								break;
							case 3:
								this.cover = '';
								break;
							case 4:
								// 代码块
								break;
							case 5:
								this.bgm = '';
								break;
							default:
							// 默认代码块
						}
					}
				}
			});
		},
		Delcarousel(index) {
			uni.showModal({
				title: '贴贴',
				content: '确定要删除吗？',
				cancelText: '再看看',
				confirmText: '再见',
				success: res => {
					if (res.confirm) {
						this.carousel.splice(index, 1);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
